<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <style>
        #app{
            width: 600px;
            margin: 50px auto;
        }
        fieldset{
            border: 1px solid orangered;
            margin-bottom: 20px;
        }
        fieldset input{
            width: 200px;
            height: 30px;
            margin: 10px 0;
        }
        table{
            width: 600px;
            border: 2px solid orangered;
            text-align: center;
        }
        thead{
            background: orangered;
        }
        </style>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
        <div id="app">
            <!--第一部分-->
            <fieldset>
                <legend>信息录入系统</legend>
                <div>
                    <span>姓名：</span>
                    <input type="text" placeholder="请输入姓名" v-model="newStudent.name">
                </div>
                <div>
                    <span>性别：</span>
                    <select name="" id="" v-model="newStudent.sex">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                 <div>
                    <span>年龄：</span>
                    <input type="text" placeholder="请输入年龄" v-model="newStudent.age">
                </div>
                <div>
                    <span>手机：</span>
                    <input type="text" placeholder="请输入手机号码" v-model="newStudent.phone">
                </div>
                <button @click="createNewStudent()">创建新用户</button>
            </fieldset>
            <!--第二部分-->
            <table>
               <thead>
                   <tr>
                       <td>姓名</td>
                       <td>性别</td>
                       <td>年龄</td>
                       <td>手机号</td>
                       <td>删除</td>
                   </tr>    
                </thead>
                <tbody>
                    <tr v-for="(item , index) in persons">
                        <td>{{item.name}}</td>
                        <td>{{item.sex}}</td>
                        <td>{{item.age}}</td>
                        <td>{{item.phone}}</td>
                        <td><button @click="deleteStudent(index)">删除</button></td>
                    </tr>
               </tbody>
           </table>
        </div>
    </body>
</html>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            persons:[
                {name:'张三',age:20,sex:'男',phone:'15734567894'},
                {name:'张四',age:25,sex:'男',phone:'13734567894'},
                {name:'张五',age:30,sex:'女',phone:'12734567894'},
                {name:'张六',age:20,sex:'男',phone:'16734567894'},
            ],
            newStudent: {name:'',age:0,sex:'男',phone:''},
        },
        methods:{
            createNewStudent(){
                //姓名不能为空
                if(this.newStudent.name==''){
                    alert('姓名不能为空')
                    return;
                }
                //年龄不能小于0
                 if(this.newStudent.age<=0){
                    alert('年龄不能小于0')
                    return;
                }
                 //手机号验证
                 if(this.newStudent.phone==''){
                    alert('手机号不能为空')
                    return;
                }
                //往数组中添加一条新记录
               this.persons.unshift(this.newStudent);
               //清空数据
            //    this.newStudent={name:'',age:0,sex:'男',phone:''};
            },
            deleteStudent(index){
                this.persons.splice(index,1);
            }
        }
    })
</script>